package ui 
{
	import events.SliderEvent;
	import flash.display.Bitmap;
	
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;	
	import flash.ui.Mouse;
	import flash.display.BitmapData;
	import flash.geom.Matrix;
	import org.flixel.FlxG;
    
	/**
	 * ...
	 * @author Jason Won
	 */
	public class Slider extends Sprite
	{
		// Components
		private var _track:AnimatedBitmap;
		private var _marker:Sprite;
		
		// Percentage
		private var _percentage:Number = 0;			// The percent is represented as a value between 0 and 1
		private var _width:int;						// The width of the slider
		private var _height:int;					// The length of the slider
		private var _markerSize:int = 15;
		
		// Color Scheme
		private var _trackColor:uint = 0xCCCCCC;
		private var _markerColor:uint = 0x333333;
		
		
		/** Constructor **/
		public function Slider(width:int, height:int) 
		{
			_width = width;
			_height = height;
			//_track = new Sprite();
			
			var bmd:BitmapData = FlxG.addBitmap(GCResources.track_vertical);
			
			// Find the scaling factor
			var xScale:Number = width *2 / bmd.width;
			var yScale:Number = height / bmd.height;			
			var matrix:Matrix = new Matrix();
			matrix.scale(xScale, yScale);

			// Rescale the image
			var smallBMD:BitmapData = new BitmapData(bmd.width * xScale, bmd.height * yScale, true, 0x000000);
			smallBMD.draw(bmd, matrix, null, null, null, true);			
			_track = new AnimatedBitmap(smallBMD, width, height);
			
			_track.addAnimation("default", [1]);
			_track.play("default");
			
			_marker = new Sprite();
			
			init();
		}
		
		public function init():void 
		{
			// Give shape
			/*
			_track.graphics.beginFill( _trackColor, 1 );
            _track.graphics.drawRect(0, 0, _width, _height);
            _track.graphics.endFill();
            */

			_marker.addChild(new Bitmap(FlxG.addBitmap(GCResources.slider_horizonal)));
			
			
			
			// Listeners
			_marker.addEventListener( MouseEvent.MOUSE_DOWN, onMarkerPress );
			
			// Add visuals			            
            addChild( _track );
            addChild( _marker );			
		}
		
		/** GET FUNCTIONS **/
		public function get percent():Number
		{
			return _percentage;
		}
		
		/** SET FUNCTIONS **/
		public function set percent(percent:Number):void
		{
			_percentage = Math.min(1, Math.max(0, percent));
			_marker.y = _percentage * (_track.height - _marker.height);
			
			dispatchEvent(new SliderEvent(SliderEvent.CHANGE, _percentage));	
		}
		
		/** Event Handlers **/
		
		// Executed when the marker is moved by the user.
		private function onMarkerPress(event:MouseEvent):void
		{
			_marker.startDrag(false, new Rectangle(0, 0, 0, _track.height - _marker.height));
			stage.addEventListener(MouseEvent.MOUSE_MOVE, updatePercent);
			stage.addEventListener(MouseEvent.MOUSE_UP, stopSliding);
		}
		
		// Update the data to reflect the visuals
		private function updatePercent(event:MouseEvent):void
		{
			event.updateAfterEvent();
			_percentage = _marker.y / (_track.height - _marker.height);
			
			dispatchEvent(new SliderEvent(SliderEvent.CHANGE, _percentage));
		}
		
		// End sliding
		private function stopSliding(event:MouseEvent):void
		{
			_marker.stopDrag();
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, updatePercent);
			stage.removeEventListener(MouseEvent.MOUSE_UP, stopSliding);
		}
	}
}
